<template>
	<div class="portlet-outer">
		<header class="portlet-header">
			<span>{{name}}</span>
			<router-link  :to="{path: link.addr}">{{link.text}}</router-link>
		</header>
		<div class="portlet-body">
			<slot></slot>
		</div>
	</div>
</template>
<script>
	export default {
		props:{
			name:{ type: String, required: true },
			link:{
				type:Object,
				default:function(){
					return {
						text:'',
						addr:''
					}
				},
				required: false
			}
		},
	}
</script>
<style  scoped lang="less" rel="stylesheet/scss">
	.portlet-outer{
		padding:0 14px;
		background-color: #fff;
		box-sizing:border-box;
		width: 100%;
		box-shadow:2px 2px 3px 3px #dee1e4;
	}
	.portlet-outer .portlet-header{
		height: 50px;
		line-height: 50px;
		color: #4c5c6e;
		font-size: 14px;
		border-bottom: #f0f0f0 1px solid;
	}
	.portlet-outer .portlet-header span{
		padding-left: 10px;
		border-left: #ff5555 3px solid;
	}
	.portlet-outer .portlet-header a{
		float: right;
		font-size: 10px;
		color:#74808e;
	}
	.portlet-outer .portlet-body{
		background: #fff;
		padding-bottom: 10px;
		padding-top: 10px;
		overflow:hidden;
	}
</style>